<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
</head>
<body>
<h1 align="center">用户注册页面</h1>
<form method="get" action="../client/register.do">
    用户名:<input type="text" name="username" id="username"/><span id="usernameSpan"></span><br/>
    密码:<input type="password" name="password" id="password"/><br/>
    性别：<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女<br/>
    邮箱地址：<input type="text" name="email"/><br/>
    电话号码：<input type="text" name="telephone"><br/>
    用户简介：<textarea name="introduce"></textarea>
    <button type="submit">提交</button>
    <button type="button" id="btn1">普通按钮</button>
    <button type="reset">重置</button>
</form>
<script type="text/javascript">
    //用户名不能超过8位 不能为空
    window.onload = function () {
        //给 用户名输入框添加焦点丢失事件
        document.getElementById("username").onblur = function () {
            //1.先拿到 input 标签，再拿到 value
            var username = document.getElementById("username").value;
            console.log(username);
            //定义正则表达式
            var usernamePattern = /^\w{1,8}$/;
            //调用正则表达式的 test()方法 判断字符串是否符合规范
            var result = usernamePattern.test(username);
            if (!result) {
                //设置span 字体颜色为红
                document.getElementById("usernameSpan").style.color = 'red';
                //设置 span 标签内部的纯文本
                document.getElementById("usernameSpan").innerText = '<h1>用户名格式有误</h1>';
            } else {
                //设置span 字体颜色为绿
                document.getElementById("usernameSpan").style.color = 'green';
                //设置 span 标签内部的HTML文本
                document.getElementById("usernameSpan").innerHTML = '<h1>用户名格式正确</h1>';
            }
        };
        //通过 document.getElementsByTagName 获取到一个数组
        document.getElementsByTagName('form')[0].onsubmit = function () {
            //获取输入的用户名
            //1.先拿到 input 标签，再拿到 value
            var username = document.getElementById("username").value;
            console.log(username);
            //定义正则表达式
            var usernamePattern = /^\w{1,8}$/;
            //调用正则表达式的 test()方法 判断字符串是否符合规范
            var result = usernamePattern.test(username);
            if (!result) {
                alert("用户名不能超过8位 不能为空！");
                //作用 阻止当前表单提交事件
                return false;
            }
            //写对密码的判断
        }
    }
</script>
</body>
</html>